<template>
  <div>
    <form-box headText="材料费明细">
      <el-button size="small" @click.native="addPart">增加材料费明细</el-button>
      <hr class="hr-color"/>
      <el-collapse v-model="partListCol_child" @change="handlePartsChange" accordion>
        <el-collapse-item v-for="(item, index) in req_part.part_list"
                          :key="index"
                          :title="item.part_name"
                          :name="index"
                          @click.native="" >
          <el-form class="small-space" label-position="right" label-width="90px" :inline="true">
            <el-form-item label="零部件" label-width="54px">
              <el-input v-model="item.part_name"></el-input>
            </el-form-item>
            <el-form-item label="材质" label-width="54px">
              <el-input v-model="item.part_type"></el-input>
            </el-form-item>
            <el-form-item label="重量" label-width="54px">
              <el-input v-model="item.part_weight" placeholder="KG"></el-input>
            </el-form-item>
            <el-form-item label="长" label-width="54px">
              <el-input v-model="item.part_length"></el-input>
            </el-form-item>
            <el-form-item label="宽" label-width="54px">
              <el-input v-model="item.part_width"></el-input>
            </el-form-item>
            <el-form-item label="高" label-width="54px">
              <el-input v-model="item.part_height"></el-input>
            </el-form-item>
            <el-form-item label="费用" label-width="54px">
              <el-input v-model="item.part_cost"></el-input>
            </el-form-item>
            <!--<el-form-item label="零部件id" label-width="90px">
              <el-input v-model="item.part_id"></el-input>
            </el-form-item>-->
            <el-form-item label="硬度" label-width="54px">
              <el-input v-model="item.part_hardness"></el-input>
            </el-form-item>
            <el-form-item label="是否有详细的计算" label-width="128px">
              <el-switch
                v-model="item.is_detail_calc"
                on-color="#13ce66"
                off-color="#ff4949">
              </el-switch>
            </el-form-item>
            <br/>
            <el-button type="danger" style="margin-bottom: 10px" @click.native="delPart(index)">
              删除材料信息
            </el-button>
            <br/>
            <span class="hr-text">明细</span>
            <el-button size="small" @click.native="addSubPartList(index)">增加</el-button>
            <hr class="hr-color"/>
            <el-table v-if="item.sub_part_list" :data="item.sub_part_list"
                      border fit highlight-current-row style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column align="center" label="名称" max-width="20%">
                <template scope="scope">
                  <span>{{scope.row.raw_nature}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="价格" max-width="20%">
                <template scope="scope">
                  <span>{{scope.row.stuff_price}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" max-width="20%">
                <template scope="scope">
                  <el-button type="primary"
                             size="small"
                             @click='editSubPartList(scope.$index,index)'
                             icon="edit">编辑</el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="delSubPartList(index,scope.$index,item.part_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </form-box>

    <el-dialog v-if="isShowEditSubPart" title="编辑零部件材料明细" :visible.sync="isShowEditSubPart" size="large" top="5%">
      <el-form class="small-space" :model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex]" label-position="right" label-width="90px" :inline="true">
        <el-form-item label="是否计算重量" label-width="90px">
          <el-switch
            v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].is_calc_weight"
            on-color="#13ce66"
            off-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="材料名称" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].raw_nature"></el-input>
        </el-form-item>
        <el-form-item label="材料Id" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].raw_nature_id"></el-input>
        </el-form-item>
        <el-form-item label="比重" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_density"></el-input>
        </el-form-item>
        <el-form-item label="比重单位" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_density_unit"></el-input>
        </el-form-item>
        <el-form-item label="直径" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_diameter"></el-input>
        </el-form-item>
        <el-form-item label="高" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_height"></el-input>
        </el-form-item>
        <el-form-item label="长" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_length"></el-input>
        </el-form-item>
        <el-form-item label="件数" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_piece"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_price"></el-input>
        </el-form-item>
        <el-form-item label="截面形状" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_shape"></el-input>
        </el-form-item>
        <el-form-item label="单价" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_up"></el-input>
        </el-form-item>
        <el-form-item label="重量" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_weight"></el-input>
        </el-form-item>
        <el-form-item label="宽" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].stuff_width"></el-input>
        </el-form-item>
        <!--<el-form-item label="子零件Id" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].sub_part_id"></el-input>
        </el-form-item>-->
        <el-form-item label="子零件名称" label-width="90px">
          <el-input v-model="req_part.part_list[subPartParentIndex].sub_part_list[subPartIndex].sub_part_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEditSubPart = false">取 消</el-button>
        <el-button type="primary" @click="isShowEditSubPart = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import formBox from '../../../../components/formBox.vue'
  import {
    accDetailPart,
    deletePartSub,
    deletePart,
  } from '@/api/cstOrder/compute'

  export default {
    name:'createComputeParts',
    components:{
      formBox
    },
    data(){
      return {
        isShowEditSubPart:false,
        subPartParentIndex:'',
        subPartIndex:'',
        partListCol_child:'',
      }
    },
    props:[
      'req_part',
      'computeId',
      'partListCol'
    ],
    mounted(){

    },
    watch: {
      // 如果 `partListCol` 发生改变，这个函数就会运行
      partListCol: function (newVal) {
        if(newVal == ''){
          this.partListCol_child = ''
        }
      }
    },
    methods:{
      addPart(){
        this.$prompt('请输入零部件名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          let part = {
            is_detail_calc:'',
            part_cost:'',
            part_hardness:'',
            part_height:'',
            part_id:'',
            part_length:'',
            part_name:value,
            part_type:'',
            part_weight:'',
            part_width:'',
            sub_part_list:[]
          }
          this.req_part.part_list.push(part)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handlePartsChange(val){
        this.$emit('changePart',this.partListCol_child)
        if(val !== ''){
          if(this.req_part.part_list[val].part_id){
            let req_getPartInfo = {
              client_type:1,
              compute_id:parseInt(this.computeId),
              part_id:this.req_part.part_list[val].part_id
            }
            accDetailPart(req_getPartInfo)
              .then(res => {
                //this.req_part.part_list[val] = res
                this.$set(this.req_part.part_list,val,res)
              })
              .catch(err => {
                console.log(err)
              })
          }
        }
      },
      delPart(index){ //删除材料明细
        this.$confirm('此操作将删除这条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(this.req_part.part_list[index])
          if(this.req_part.part_list[index].part_id){
            let req_delPart = {
              client_type:1,
              compute_id:this.computeId,
              part_ids:[this.req_part.part_list[index].part_id]
            }
            deletePart(req_delPart)
              .then(res => {
                this.req_part.part_list.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
              })
          }else{
            this.req_part.part_list.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addSubPartList(index){  //增加材料明细--子部件明细
        let subPart = {
          is_calc_weight:'',
          raw_nature:'',
          raw_nature_id:'',
          stuff_density:'',
          stuff_density_unit:'',
          stuff_diameter:'',
          stuff_height:'',
          stuff_length:'',
          stuff_piece:'',
          stuff_price:'',
          stuff_shape:'',
          stuff_up:'',
          stuff_weight:'',
          stuff_width:'',
          sub_part_id:'',
          sub_part_name:''
        }
        this.req_part.part_list[index].sub_part_list.push(subPart)
      },
      delSubPartList(parentIndex,index,partId){
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(11111111)
          console.log(this.req_part.part_list[parentIndex])
          console.log(this.req_part.part_list[parentIndex].sub_part_list[index])
          if(this.req_part.part_list[parentIndex].sub_part_list[index].sub_part_id){
            let req_delSubPart = {
              client_type:1,
              compute_id:this.computeId,
              part_id:partId,
              sub_part_ids:[this.req_part.part_list[parentIndex].sub_part_list[index].sub_part_id]
            }
            deletePartSub(req_delSubPart)
              .then(res => {
                this.req_part.part_list[parentIndex].sub_part_list.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败')
              })
          }else{
            this.req_part.part_list[parentIndex].sub_part_list.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editSubPartList(index,parentIndex){
        this.subPartIndex = index
        this.subPartParentIndex = parentIndex
        this.isShowEditSubPart = true;
        console.log(this.isShowEditSubPart)
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
